<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
	
	<meta name="format-detection" content="telphone=no,email=no"/>
	<link rel="stylesheet" href="css/global.css">
	<title>popover</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<header class="header">
    <div class="header-left"><i class="header-icon icon-v-left js-back"></i></div>
    <div class="header-right">
        <i class="header-icon icon-dots"></i>
    </div>
    <h1 class="page-tt">popover</h1>
</header>
<main id="pages" class="page-wrap">
    <div class="page">
        <article class="article">
            <span class="btn-default js-toast-btn">toast 1</span>
            <span class="btn-default">toast 2</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis nulla, ea ex quas ut pariatur totam hic ducimus nostrum, repudiandae. Id ea asperiores commodi sapiente perspiciatis, obcaecati sint natus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo minima corporis nesciunt similique eum tenetur, a error odit dicta! Quos atque odit quibusdam in deserunt sed temporibus officiis vel sit.</p>
            <p>Sit rem reiciendis, nobis, id consequatur saepe quam excepturi non commodi cum omnis velit iusto et dolores totam consequuntur, nisi quisquam cumque maiores tempora labore incidunt? Ex odit sapiente nam!</p>
            <p>Nesciunt quibusdam, vitae perferendis veritatis iste eos explicabo perspiciatis molestias quaerat ipsum nobis id neque quas, similique minima architecto illo voluptates, ipsam reiciendis vero magni odio sit. Animi, voluptates, nesciunt!</p>
            <p>Possimus ad fuga perspiciatis officia nobis distinctio facere suscipit quia, id. Officia dolorem deserunt ex commodi, non quaerat et aliquid eaque, facere reiciendis, a numquam maxime! In officiis eveniet omnis?</p>
            <p>Laudantium magnam molestias saepe velit odit dolore, soluta reprehenderit placeat. Natus omnis debitis aperiam ea sit nostrum aut culpa veniam, repudiandae sint officia et adipisci sed laborum tempora ad. Non.</p>
        </article>
    </div>
</main>

<div class="overlay overlay--no-header overlay--transparent active"></div>
<section class="popover popover--header-more">
    <i class="popover-triangle"></i>
    <ul class="line-list">
        <li class="line-item">
            <svg class="item-icon icon-svg icon-email"><use xlink:href="images/icons.svg#icon-email"></use></svg>
            最新消息
        </li>
        <li class="line-item">
            <svg class="item-icon icon-svg icon-user"><use xlink:href="images/icons.svg#icon-user"></use></svg>
            我的中心
        </li>
        <li class="line-item">
            <svg class="item-icon icon-svg icon-setting"><use xlink:href="images/icons.svg#icon-setting"></use></svg>
            设置</li>
        <li class="line-item">
            <svg class="item-icon icon-svg icon-logout"><use xlink:href="images/icons.svg#icon-logout"></use></svg>
            退出</li>
    </ul>
</section>
</body>
</html>